---
sidebar_position: 1
---

# Variant

Default color stylings available for the ReactTooltip component.

import { Tooltip } from 'react-tooltip'

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}

`variant` can be one of `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'`

```jsx
import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
  data-tooltip-variant="success"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
```

<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Success tooltip variant"
    data-tooltip-variant="success"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Error tooltip variant"
    data-tooltip-variant="error"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Warning tooltip variant"
    data-tooltip-variant="warning"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Info tooltip variant"
    data-tooltip-variant="info"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Dark tooltip variant"
    data-tooltip-variant="dark"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Light tooltip variant"
    data-tooltip-variant="light"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <Tooltip id="my-tooltip" />
</div>
